<template>
    <div class="container">
        <!-- 头部 -->
        <div class="header-content">
            <div class="header-left"> 重庆市智慧农场 </div>
            <div class="header-right">
                <div class="f fac">
                    <div :class="['header-title', data.activeIndex == 1 ? 'active-title' : '']" @click="changeActiveIndex(1)">农场分布</div>
                    <!-- <div :class="['header-title', data.activeIndex == 2 ? 'active-title' : '']" @click="changeActiveIndex(2)">病虫害防控</div> -->
                    <img src="../../assets/dataImg/data_shouye.png" @click="$router.push(data.indexPath)" alt="">
                </div>
            </div>
        </div>

        <!-- 左侧 -->
        <div v-if="data.activeIndex == 1" class="left-bch content f fv">
            <div class="top">
                <div class="title">病虫害简介</div>
                <div class="desc-box">
                    <div class="desc">
                        <div>病虫害是指对农作物、林木、牧畜等造成的损害，它们是由病原生物（如真菌、细菌、病毒）引起的，这些病原生物可以通过各种途径传播，对生态环境和人类的生存构成严重威胁。病虫害可以分为两大类：
                        </div>
                        <div>
                            1.病害：这类病症通常表现为植物体的外部形态上的变化，如枯萎、腐烂、斑点、霉粉、花叶等症状。病害可以根据病原种类进一步分为细菌性、病毒性、真菌性等。常见的病害包括但不限于白粉病、锈病、灰霉病、黑斑病、炭疽病、枝枯病、褐斑病、根腐病等。例如，白粉病会引起叶片出现白色粉状物，而锈病则会在叶背产生黄色粉状突起。
                        </div>
                        <div>
                            2.虫害：虫害则涉及昆虫或其他小动物对作物的侵害，如吸食植物汁液的蚜虫、啃食叶片的菜青虫、吸食植物汁液的刺吸式害虫等。虫害同样可能引起植物的生长受阻、品质下降、产量减少，甚至可能导致植物死亡。
                        </div>
                    </div>
                </div>
            </div>
            <img class="slider" src="../../assets/images/hengxian.png">
            <div class="center">
                <div class="title f fac fpj">
                    <span>病虫害分布</span>
                    <el-switch v-model="data.nzwTc" inactive-color="#263d3fB3"></el-switch>
                </div>
                <div></div>
            </div>
            <img class="slider" src="../../assets/images/hengxian.png">
            <div class="bottom">
                <div class="title">面积</div>
                <div></div>
            </div>
        </div>

        <!-- 右侧 -->
        <div v-if="data.activeIndex == 1" class="right-bch content">
            右侧
        </div>

        <!-- 3d地图 -->
        <iframe class="map" name="map" id="map" :src="`http://62.234.193.89:90/3Dmap.html?unitCode=500000&unitName=重庆市&isShowTestPanel=false&token=${data.token}`"></iframe>
    </div>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue'
import utils from '@/utils/utils'

const mapRef = ref(null)
const data = reactive({
    activeIndex: 1,
    token: sessionStorage.getItem('token'),
    indexPath: sessionStorage.getItem('indexPath'),
    // 农作物图层开关
    nzwTc: false
})

// 切换
const changeActiveIndex = (index) => {
    if (data.activeIndex == index) return
    data.activeIndex = index
    // 以后可能有更多的界面
    switch (index) {
        case 1:
            console.log("农场分布");
            break;
        case 2:
            console.log("农作物分布");
            break;
        default:
            break;
    }
}


onMounted(() => {
  
})
</script>

<style lang="scss" scoped>
$color: #4FFFC0;

.container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    padding: 0;
    margin: 0;

    .header-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 0.9rem;
        z-index: 1;
        display: flex;
        justify-content: space-between;
        background: url("../../assets/images/toubu.png");
        color: #FFF;

        .header-left {
            margin-left: 0.1rem;
            font-size: 0.34rem;
            font-weight: 800;
            height: 0.7rem;
            display: flex;
            align-items: center;
            background-image: linear-gradient(to right, $color, $ncpColor);
            color: transparent;
            -webkit-background-clip: text;
        }

        .header-right {
            margin-right: 0.2rem;
            height: 0.7rem;
            display: flex;
            align-items: center;

            .header-title {
                margin-right: 0.2rem;
                font-weight: 700;
                color: #fff;
                font-size: 0.18rem;
                cursor: pointer;
            }

            .active-title {
                color: $ncpColor;
                font-size: 0.2rem;
            }

            img {
                width: 0.24rem;
                height: 0.24rem;
                cursor: pointer;
            }
        }
    }

    .content {
        width: 3.2rem;
        height: calc(100% - 0.9rem - 0.2rem);
        position: absolute;
        bottom: 0;
        color: #fff;
        padding: 0.1rem;
        background-color: rgba(38, 61, 63, 0.7);

        .title {
            font-size: 0.16rem;
            font-weight: 700;
            color: $color;
        }

        .slider {
            height: 0.04rem;
            margin: 0.08rem 0;
        }
    }

    .left-bch {
        left: 0.05rem;
        .top {
            height: 40%;

            .desc-box {
                overflow-y: hidden;
                height: calc(100% - 0.23rem);
                padding: 0.05rem 0;
            }

            .desc {
                height: 100%;
                animation: scroll;
                transition: all 0.5s;
                animation: scroll linear 15s infinite 1s;
                animation-fill-mode: forwards;

                div {
                    text-indent: 2em;
                    font-size: 0.14rem;
                    font-weight: 500;
                    letter-spacing: 2px;
                    line-height: 0.24rem;
                }
            }

            @keyframes scroll {
                0% {
                    transform: translateY(0px);
                }

                10% {
                    transform: translateY(0px);
                }

                20% {
                    transform: translateY(-28px);
                }

                30% {
                    transform: translateY(-56px);
                }

                40% {
                    transform: translateY(-84px);
                }

                50% {
                    transform: translateY(-112px);
                }

                60% {
                    transform: translateY(-140px);
                }

                70% {
                    transform: translateY(-168px);
                }

                80% {
                    transform: translateY(-196px);
                }

                90% {
                    transform: translateY(-224px);
                }

                100% {
                    transform: translateY(0px);
                }
            }
        }

        .center {
            height: 35%;
        }

        .bottom {
            height: 25%;
        }
    }
    .right-bch {
        right: 0.05rem;
    }

    

    .map {
        width: 100%;
        height: 100%;
        border: none;
    }
}</style>